<template>
	<view class="swiper-container" ref="swiperRef">
		<view class="swiper-wrapper">
			<view class="swiper-slide"
			      v-for="i in pageCount"
			      :key="i"
			>
				<slot :name="i-1"></slot>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        name: "ViewPager",
        props: {
            onPageScrolled: Function,
            onPageSelected: Function,
            pageCount: Number,
            initialIndex: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                swiper: null,
                lockIndex: -1,
                useSwiperProgress: false,
                timer: null
            }
        },
        methods: {
            initSwiper() {
                const Swiper = require('/src/libs/swiper-4.5.3')
                this.lockIndex = -1
                const self = this
                this.swiper = new Swiper(this.$refs.swiperRef.$el, {
                        initialSlide: this.initialIndex,
                        resistanceRatio: 0,
                        watchSlidesProgress: true,
                        on: {
                            init() {
                                self.useSwiperProgress = true
                            },
                            slideChange() {
                                if (self.useSwiperProgress) {
                                    if (self.onPageSelected) {
                                        self.onPageSelected(this.activeIndex)
                                    }
                                }
                            },
                            progress() {
                                if (self.useSwiperProgress) {
                                    if (self.lockIndex === -1) {
                                        self.lockIndex = this.activeIndex
                                    }
                                    let v = this.slides[self.lockIndex].progress
                                    if (v > 1) {
                                        v = 1
                                    }
                                    if (self.onPageScrolled) {
                                        self.onPageScrolled(self.lockIndex, v)
                                    }
                                    if (v === Math.floor(v)) {
                                        self.lockIndex = -1;
                                    }
                                }
                            },
                        },
                    }
                )
            },
            setCurrentItem(index) {
                if (this.swiper) {
                    if (this.timer) {
                        clearTimeout(this.timer)
                    }
                    this.useSwiperProgress = false;
                    this.swiper.slideTo(index, 250, false)
                    this.timer = setTimeout(() => {
                        if (this.onPageSelected) {
                            this.onPageSelected(index)
                        }
                        this.useSwiperProgress = true
                        this.timer = null
                    }, 260)
                }
            },
        },
        mounted() {
            this.$nextTick(this.initSwiper)
        },
        destroyed() {
            if (this.timer) {
                clearTimeout(this.timer)
                this.timer = null
            }
            if (this.swiper) {
                this.swiper.destroy()
            }
        }
    }
</script>
